<template>
  <div class="container">
    <div class="list" v-for="(item,index) in data">
      <div class="list-index border-top-linear-transparent border-bottom-linear-transparent">{{index+1}}</div>
      <div class="list-progress">
        <span>{{item.assetName}} | {{item.ip.slice(0,20)}} | {{item.assetType}} | {{item.userName}}</span>
        <el-progress :percentage="total>0?(item.typeTotal/total)*100:0" :show-text="false"></el-progress>
      </div>
      <div class="list-count">{{item.eventTotal}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    data:{
      type:Array,
      default(){
        return []
      }
    },
    total:{
      type:Number,
      default(){
        return 0
      }
    }
  },
}
</script>

<style scoped lang="scss">
.container{
  width:100%;
  .list{
    display:flex;
    width:100%;
    //align-items: center;
    //justify-content: space-between;
    padding:.2rem 0;
    .list-index{
      width:10%;
      border-left:1px solid  rgba(2, 231, 243, 0.8);
      padding:.3rem 1rem;
    }
    .list-progress{
      width:80%;
      margin:0 1rem 0 .5rem;
      text-align:left;
      overflow:hidden;
      span{
        display: inline-block;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width:90%;
        line-height:1.8rem;
        font-size:1rem;
      }

    }
  }
}
::v-deep .el-progress-bar__inner{
  background-image: linear-gradient(270deg, #00E1E4 0%, rgba(59,138,252,0.00) 100%);
}
</style>
